<template>
  <div class="user-health-data-main">
    <div class="user-info">
      <span>姓名：{{userinfo.username}}</span>
      <span>性别：{{userinfo.sex}}</span>
      <span>年龄：{{userinfo.age}}</span>
    </div>

    <!--心率评估-->
    <div class="assess-box">
      <div class="title">心率估评</div>

      <div class="data-type">
        <div class="val">
          <img src="../../assets/img/healthData/1.png" alt="">
          心率 <span class="type-val">{{heartRate.val}}</span><i class="unit">bpm</i>
        </div>
        <div class="result">
          <img :src="heartRate.type == 1 ?resultImgList[0] : resultImgList[1]" alt="">
          {{heartRate.txt}}
        </div>
      </div>

      <div class="detection-result">
        <div class="txt">
          心率
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: heartRate.left + '%'}">
              <p class="val">
                <span :style="heartRate.val | progressSpanLeftCss">{{heartRate.val}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="reference-box">
        <p class="line">
          <span>心率参考值</span>
        </p>
        <div class="reference">
          <div>
            <p class="normal">60-100</p>
            <p class="txt">心率正常</p>
          </div>
          <div>
            <p class="anomaly"><i><</i>60</p>
            <p class="txt">心率过缓</p>
          </div>
          <div>
            <p class="anomaly"><i>></i>100</p>
            <p class="txt">心率过快</p>
          </div>
        </div>
      </div>
    </div>
    <!--心率评估-->

    <!--脉搏波波形-->
    <div class="pulse-wave assess-box">
      <div class="title">脉搏波波形</div>

      <div id="charId" style="width: 100%;height: 150px;"></div>
    </div>
    <!--脉搏波波形-->

    <!--血压趋势-->
    <div class="blood-pressure assess-box">
      <div class="title">血压趋势</div>

      <div class="data-type">
        <div class="val">
          <img src="../../assets/img/healthData/2.png" alt="">
          心率 <span class="type-val">{{bloodPressureData.lte}}/{{bloodPressureData.gt}}</span><i class="unit">mmhg</i>
        </div>
        <div class="result">
          <img :src="bloodPressureData.type == 1 ? resultImgList[0] : resultImgList[1]" alt="">
          {{bloodPressureData.txt}}
        </div>
      </div>

      <div class="detection-result">
        <div class="txt">
          收缩压
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: bloodPressureData.lteL + '%'}">
              <p class="val">
                <span :style="bloodPressureData.lte | progressSpanLeftCss">{{bloodPressureData.lte}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>
      <div class="detection-result">
        <div class="txt">
          舒张压
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: bloodPressureData.gtL + '%'}">
              <p class="val">
                <span :style="bloodPressureData.gt | progressSpanLeftCss">{{bloodPressureData.gt}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="reference-box">
        <p class="line">
          <span>血压参考值</span>
        </p>
        <div class="reference">
          <div>
            <p class="txt">血压正常</p>
            <p>90-139/60-89</p>
          </div>
          <div>
            <p class="txt">低血压</p>
            <p><90/60</p>
          </div>
          <div>
            <p class="txt">轻度高血压</p>
            <p>140-159/90-99</p>
          </div>
          <div>
            <p class="txt">中度高血压</p>
            <p>160-180/100-110</p>
          </div>
          <div>
            <p class="txt">重度高血压</p>
            <p>>180/110</p>
          </div>
        </div>
      </div>
    </div>
    <!--血压趋势-->

    <!--血管弹性指标-->
    <div class="vasoactivity assess-box">
      <div class="title">血管弹性指标</div>

      <div class="data-type">
        <div class="val">
          血管弹性指标 <span class="type-val">{{vasoactivityData.val}}</span>
        </div>
        <div class="result">
          <img :src="vasoactivityData.type == 1 ?resultImgList[0] : resultImgList[1]" alt="">
          {{vasoactivityData.txt}}
        </div>
      </div>

      <div class="detection-result">
        <div class="txt">
          血管弹性指标
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: vasoactivityData.left + '%'}">
              <p class="val">
                <span :style="vasoactivityData.val | progressSpanLeftCss">{{vasoactivityData.val}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="reference-box">
        <p class="line">
          <span>血管弹性指标参考值</span>
        </p>
        <div class="reference">
          <div>
            <p class="normal"><i>></i>80</p>
            <p class="txt">正常</p>
          </div>
          <div>
            <p class="common">70-80</p>
            <p class="txt">一般</p>
          </div>
          <div>
            <p class="anomaly">55-69</p>
            <p class="txt">较差</p>
          </div>
        </div>
      </div>
    </div>
    <!--血管弹性指标-->

    <!--血氧饱和度指标-->
    <div class="SPOZ vasoactivity assess-box">
      <div class="title">血氧饱和度指标</div>

      <div class="data-type">
        <div class="val">
          血氧饱和度 <span class="type-val">{{SPOZData.val}}</span>
        </div>
        <div class="result">
          <img :src="SPOZData.type == 1 ?resultImgList[0] : resultImgList[1]" alt="">
          {{SPOZData.txt}}
        </div>
      </div>

      <div class="detection-result">
        <div class="txt">
          血氧饱和度
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: SPOZData.left+'%'}">
              <p class="val">
                <span :style="SPOZData.val | progressSpanLeftCss">{{SPOZData.val}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="reference-box">
        <p class="line">
          <span>血氧饱和度参考值</span>
        </p>
        <div class="reference">
          <div>
            <p class="normal">94-99</p>
            <p class="txt">正常</p>
          </div>
          <div>
            <p class="anomaly"><i><</i>94</p>
            <p class="txt">氧供应不足</p>
          </div>
        </div>
      </div>
    </div>
    <!--血氧饱和度指标-->

    <!--疲劳指数-->
    <div class="fatigue-index vasoactivity assess-box">
      <div class="title">疲劳指数</div>

      <div class="data-type">
        <div class="val">
          疲劳指数 <span class="type-val">{{fatigueIndexData.val}}</span>
        </div>
        <div class="result">
          <img :src="fatigueIndexData.type == 1 ?resultImgList[0] : resultImgList[1]" alt="">
          {{fatigueIndexData.txt}}
        </div>
      </div>

      <div class="detection-result">
        <div class="txt">
          疲劳指数
        </div>
        <div class="result-box">
          <div class="progress-box">
            <div class="result" :style="{left: fatigueIndexData.left+'%'}">
              <p class="val">
                <span :style="fatigueIndexData.val | progressSpanLeftCss">{{fatigueIndexData.val}}</span>
              </p>
              <p class="circle"></p>
              <p class="triangle"></p>
            </div>
          </div>
        </div>
      </div>

      <div class="reference-box">
        <p class="line">
          <span>疲劳指数参考值</span>
        </p>
        <div class="reference">
          <div>
            <p class="normal"><i>></i>30</p>
            <p class="txt">正常</p>
          </div>
          <div>
            <p class="common">20-30</p>
            <p class="txt">一般</p>
          </div>
          <div>
            <p class="anomaly"><i><</i>20</p>
            <p class="txt">较差</p>
          </div>
        </div>
      </div>
    </div>
    <!--疲劳指数-->

    <!--健康总结报告-->
    <div class="summary">
      <div class="title">
        健康总结报告
      </div>
      <ul class="list">
        <li>
          <div class="list-val">
            <span>心率</span>
            <span>{{heartRate.val}}</span>
            <span :style="{color:heartRate.type==1 ? summaryColor[0] : summaryColor[1]}">{{heartRate.txt}}</span>
          </div>
        </li>
        <li>
          <div class="list-val">
            <span>血压</span>
            <span>{{bloodPressureData.lte}}/{{bloodPressureData.gt}}</span>
            <span :style="{color:bloodPressureData.type==1 ? summaryColor[0] : summaryColor[1]}">{{bloodPressureData.txt}}</span>
          </div>
        </li>
        <li>
          <div class="list-val">
            <span>血管弹性</span>
            <span>{{SPOZData.val}}</span>
            <span :style="{color:SPOZData.type==1 ? summaryColor[0] : summaryColor[1]}">{{SPOZData.txt}}</span>
          </div>
          <div class="notify">
            <p>适宜增加运动量，少熬夜，适当补充营养，条件允许的情况
              下实时监测微循环的数据变化，保持身体健康。</p>
          </div>
        </li>
        <li>
          <div class="list-val">
            <span>疲劳指数</span>
            <span>{{fatigueIndexData.val}}</span>
            <span :style="{color:fatigueIndexData.type==1 ? summaryColor[0] : summaryColor[1]}">{{fatigueIndexData.txt}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!--健康总结报告-->
  </div>
</template>

<script type="text/ecmascript-6">

  import normalImg from '../../assets/img/healthData/3.png'
  import anomalyImg from '../../assets/img/healthData/4.png'

  export default {
    data() {
      return {
        userinfo: {
          username: '你猜啊',
          sex: '男',
          age: '28',
        },
        heartRate: {
          val: 0,
        }, // 心率数据
        chartData: [
//          ["2000-06-05", 116],
//          ["2000-06-06", 129],
//          ["2000-06-07", -135],
//          ["2000-06-08", 86],
//          ["2000-06-09", -73],
//          ["2000-06-10", 85],
//          ["2000-06-11", 73],
//          ["2000-06-12", -68],
//          ["2000-06-13", 92],
//          ["2000-06-14", 130],
//          ["2000-06-15", -245],
//          ["2000-06-16", 139],
//          ["2000-06-17", -115],
//          ["2000-06-18", 111],
//          ["2000-06-19", -309],
//          ["2000-06-20", 206],
//          ["2000-06-21", -137],
//          ["2000-06-22", 128],
//          ["2000-06-23", -85],
//          ["2000-06-24", 94],
//          ["2000-06-25", -71],
//          ["2000-06-26", 106],
//          ["2000-06-27", -84],
//          ["2000-06-28", 93]
        ], // 脉搏波波形数据
        defineChartData: [
          [0,0],
          [2,0],
          [3,0],
          [4,0],
          [5,0],
          [6,0],
          [7,0],
          [8,0],
          [9,0],
          [10,0],
          [11,0],
          [12,0],
          [13,0],
          [14,0],
          [15,0],
          [16,0],
          [17,0],
          [18,0],
          [19,0],
          [20,0]
        ],
        bloodPressureData: {
          lte: 132,
          gt: 87,
        }, // 血压趋势
        vasoactivityData: {
          val: 80,
        }, // 血管弹性指标
        SPOZData: {
          val: 80,
        }, // 血氧饱和度指标
        fatigueIndexData: {
          val: 82,
        }, // 疲劳指数
        summaryColor: [
          '#3D7EFF',
          '#F0311D',
        ], // 颜色
        resultImgList: [
          normalImg,
          anomalyImg
        ], // 表情
      }
    },
    created() {
      const _this = this
      this.$nextTick(() => {
        _this.createChart(_this.chartData)
      })
      this.initData()
    },
    filters: {
      progressSpanLeftCss(val) {
        let cssVal = ''
        if(val > 100) {
          cssVal = 'transform: translateX(-78%)'
        } else if(val > 10) {
          cssVal = 'transform:translateX(-93%)'
        } else if(val < 10) {
          cssVal = 'transform:translateX(-140%)'
        }
        return cssVal
      }
    },
    methods: {
      initData() {
        let arr = ''
        this.chartData = arr.length > 0 ? arr : this.defineChartData
        // 心率值
        this.heartRate.left = this.maximum(this.heartRate.val, 30, 220, 100)
        this.heartRate.txt = this.getHeartRateTxtAndType(this.heartRate.val).txt
        this.heartRate.type = this.getHeartRateTxtAndType(this.heartRate.val).type
        // 血压趋势
        this.bloodPressureData.lteL = this.maximum(this.bloodPressureData.lte, 50, 150, 100)
        this.bloodPressureData.gtL = this.maximum(this.bloodPressureData.gt, 50, 100, 100)
        this.bloodPressureData.txt = this.getBloodPressureTxtAndType(parseInt(this.bloodPressureData.lte), parseInt(this.bloodPressureData.gt)).txt
        this.bloodPressureData.type = this.getBloodPressureTxtAndType(parseInt(this.bloodPressureData.lte), parseInt(this.bloodPressureData.gt)).type

        // 血管弹性指标
        this.vasoactivityData.left = this.maximum(this.vasoactivityData.val, 0, 100, 100)
        this.vasoactivityData.txt = this.getVasoactivityTxtAndType(this.vasoactivityData.val).txt
        this.vasoactivityData.type = this.getVasoactivityTxtAndType(this.vasoactivityData.val).type
        // 血氧饱和度
        this.SPOZData.left = this.maximum(this.SPOZData.val, 50, 50, 100)
        this.SPOZData.txt = this.getSPOZTxtAndType(this.SPOZData.val).txt
        this.SPOZData.type = this.getSPOZTxtAndType(this.SPOZData.val).type
        // 疲劳指数
        this.fatigueIndexData.left = this.maximum(this.fatigueIndexData.val, 0, 100, 100)
        this.fatigueIndexData.txt = this.getFatigueIndexTxtAndType(this.fatigueIndexData.val).txt
        this.fatigueIndexData.type = this.getFatigueIndexTxtAndType(this.fatigueIndexData.val).type
      },
      // 脉搏波波形数据
      createChart(data) {
        let myChart = this.$echarts.init(document.getElementById('charId'))

        let opsions = {
          grid: {
            left: '1%',  //距离左边的距离
            right: '4%', //距离右边的距离
            top: '12%',
            bottom: '3%', //距离底部的距离
            containLabel: true //用于『防止标签溢出』的场景
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b0}: {c0}'
          },
          xAxis: {
            show: false,
            splitLine: {show: false},
            data: data.map(item => {
              return item[0];
            })
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              width: 1,
              lineStyle:{
                type: 'solid',
                color:'rgba(61,126,255, .08)', // 分割线颜色
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: 'rgba(247,251,255,1)', // 背景颜色
              }
            },
          },
          series: [{
            type: 'line',
            symbol: 'none',  //去掉折线圆点
            symbolSize: 2,   //这个值设置成线的粗细
            itemStyle : {
              normal : {
                color:'#00FF00',
                lineStyle:{
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0084FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#00BAFF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              }
            },
            data: data.map(item => {
              return item[1];
            }),
          }]
        }

        myChart.setOption(opsions);
      },
      /**
       * 检测结果左边位移量
       * @param val 检测值
       * @param minuend 被减数
       * @param dividend 被除数
       * @param maxVal 最大值
       * @returns {Number|number}
       */
      maximum(val, minuend, dividend, maxVal) {
        let v = parseInt((parseInt(val) - minuend) / dividend * 100) >= maxVal ? maxVal : parseInt((parseInt(val) - minuend) / dividend * 100)
        v = v > 0 ? v : 0
        return v
      },
      // 心率值
      getHeartRateTxtAndType(val) {
        let obj = {}
        if(val >= 60 && val <= 100) {
          obj.txt = '正常';
          obj.type = 1
        }
        if(val < 60) {
          obj.txt = '过缓';
          obj.type = 2
        }
        if(val > 100) {
          obj.txt = '过快';
          obj.type = 2
        }
        return obj
      },
      // 血压趋势
      getBloodPressureTxtAndType(lte, gt) {
        let obj = {}
        if((lte >= 90 && lte <= 139) && (gt >= 60 && gt <= 89)) {
          obj.txt = '正常';
          obj.type = 1
        }
        if(lte < 90 && gt <= 60) {
          obj.txt = '低血压';
          obj.type = 2
        }
        if((lte >= 140 && lte <= 159) && (gt >= 90 && gt <= 99)) {
          obj.txt = '轻度高血压';
          obj.type = 2
        }
        if(lte >= 180 && gt > 110) {
          obj.txt = '重度高血压';
          obj.type = 2
        }
        return obj
      },
      // 血管弹性指标
      getVasoactivityTxtAndType(val) {
        let obj = {}
        if(val > 80) {
          obj.txt = '正常';
          obj.type = 1
        }
        if(val >= 70 && val <= 80) {
          obj.txt = '一般';
          obj.type = 2
        }
        if(val >= 55 && val <= 69) {
          obj.txt = '较差';
          obj.type = 2
        }
        return obj
      },
      // 血氧饱和度
      getSPOZTxtAndType(val) {
        let obj = {}
        if(val >= 94 && val <= 99) {
          obj.txt = '正常';
          obj.type = 1
        }
        if(val <= 94) {
          obj.txt = '氧供应不足';
          obj.type = 2
        }
        return obj
      },
      // 疲劳指数
      getFatigueIndexTxtAndType(val) {
        let obj = {}
        if(val > 30) {
          obj.txt = '正常';
          obj.type = 1
        }
        if(val >= 20 && val <= 30) {
          obj.txt = '一般';
          obj.type = 2
        }
        if(val < 20) {
          obj.txt = '较差';
          obj.type = 2
        }
        return obj
      },
    },
  }
</script>

<style scoped lang="css">
  @import "../../assets/css/healthMonitoring/userHealthDate.css";
</style>
